<template>
    <div class="mian">
     <div class="text">
       <div class="text-span">  <span>当前是<span class="text-week"> {{ week }} </span> </span> </div>
      <div style="display: flex;">
        <div  class="fanhui"style="width: 50px;margin-right: 4px;"> <span class="fanhui-but">导入</span></div>
       <div class="fanhui"> 
        <img src="../../../assets/home/play.svg">
         <span class="fanhui-but">点击返回</span>
        </div>
     
      </div>
     </div>
 
     <div class="kapian">
      <div v-for="(index) in 18" :key="index" class="kapian-for" @click="selectWeek(index)">
        <div class="kapian-mian">
          <div class="kapian-mian-text"><p>第{{ index }}周</p></div>
           <div class="kapian-mian-zhu">
            <table>
               <tr>
              <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               </tr>
               <tr>
                <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               </tr>
               <tr>
                <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               </tr>
               <tr>
                <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               </tr>
               <tr>
                <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               </tr>
               <tr>
                <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               </tr>
               <tr>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               <td></td>
               </tr>
            </table>
           </div>
        </div>   
        </div>
       </div>
  
   
    </div>
</template>

<script setup lang="ts">
import { ref ,computed} from 'vue';
const selectedWeek = ref(1);
const week = computed(() => `<第${selectedWeek.value}周>`);
import { defineEmits } from 'vue';
const emit = defineEmits(['select-week']);
const selectWeek = (weekIndex: number) => {
    selectedWeek.value = weekIndex;
  emit('select-week', weekIndex);
};
</script>

<style scoped lang="scss">
.mian{
    display: flex;
    flex-direction: column;    
   margin-top: 118px;
    width: 614px;
    height: 137px;
    border-radius: 10px;
background: #FFFFFF;
box-shadow: 0px 4px 4px 0px #0000003F;

}
.text{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .text-span{
        margin-left: 16px;
        color: #000000;
font-family: Inter;
font-weight: light;
font-size: 10.73px;
line-height: 1.2;

text-align: left;
   .text-week{
    color: #3656f7;
   }
    }
   .fanhui{
    width: 153px;
    height: 21px;
    background-color: rgb(229, 237, 250);
    border-radius: 10px;
   display: flex;
   justify-content: center;
    .fanhui-but{
        color: #65558F;
font-family: Roboto;
font-weight: medium;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.1px;
text-align: center;
margin: 0px 10px;
    }
   
} 
}
.kapian-for{
    display: flex;
  margin-right: 5.6px;
    width: 99px;
}
.kapian::-webkit-scrollbar {

height: 5px; /* 设置滚动条的高度 */
}
.kapian::-webkit-scrollbar-thumb {
    background-color: #88888881; /* 滚动滑块的背景颜色 */
    border-radius: 4px; /* 滚动滑块的圆角 */
    height: 1px; /* 设置滚动滑块的高度，这将决定滚动条的粗细 */
}

.kapian{
    display: flex;
    margin-left: 9px;
    margin-top: 4px;
    width: 591px;
    height: 97px;
    border-radius: 2.8px;
    background: linear-gradient(139.41deg, #007AFF 0%, #79B7FC 28.999999999999996%, #E5EDFA 100%);
overflow: hidden;
overflow-x: scroll; 

.kapian-mian{
    display: flex;
flex-direction: column;
align-items: center;
margin-left: 13.83px;
.kapian-mian-text{
    color: #1668C2;
font-family: Microsoft YaHei UI;
font-weight: bold;
font-size: 11.52px;
line-height: 1.2;
text-align: left;
margin-bottom: 1.3px;
margin-top: 6.7px;
}
 .kapian-mian-zhu{
    width: 99px;
    height: 71px;
    border-radius: 2.8px;
background: #FFFFFF;
padding: 2.89px;
    table{
        width: 100%;
        height: 100%;
        border-collapse: collapse;
        border-collapse: separate; /* 需要设置为separate才能使用border-spacing */
        border-spacing: 3px 1.07px; /* 设置列间隔为3px，行间隔为1.07px */
        tr{
            height: 8.37px;
          
            td{
                width: 10.68px;
                height: 8.37px;
                // border: 1px solid #000000;
                background-color: #E5EDFA;
            }
        }
 }
}

}
}
</style>